import React, { Component, Suspense } from "react";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { connect } from "dva";
import PageLoading from "@/components/PageLoading";
import GridContent from "@/components/PageHeaderWrapper/GridContent";
import { formatMessage } from 'umi-plugin-react/locale';
import styles from "./knowledgeCenter.less";
import { Row, Col, Card, Button, Table, Form, DatePicker, Tabs, Input, Typography, message, Icon, Divider } from "antd";
import moment from "moment";
import qa from "../../assets/homeList/qa.png";
import dialog from "../../assets/homeList/dialog.png";
import graph from "../../assets/homeList/graph.png";
import { getKnowledgeInfo, getWorkloadReport, exportWorkloadReport } from '@/services/home';
import UserSession from "@/UserSession";
import QaInfo from "../User/qaInfo";
const { Text } = Typography;

const yesterday = moment().subtract('1', 'days').format("YYYY-MM-DD")
const sevenDaysAgo = moment().subtract('7', 'days').format("YYYY-MM-DD")
const monthAgo = moment().subtract("1", "months").format('YYYY-MM-DD');
const today = moment().format('YYYY-MM-DD')

class KnowledgeCenter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			queryData: {
				query: '',
				startTimeBegin: '',
				startTimeEnd: '',
			},
			list: [],
			info: {
				qaInfo: {},
				dialogInfo: {},
				atlasInfo: {},
				docInfo: {}
			},
			loading: false
		};
	}

	componentWillMount() {
		let { queryData } = this.state;
		const startTimeBegin = moment().subtract("1", "months").format('YYYY-MM-DD');
		const startTimeEnd = moment().format('YYYY-MM-DD');
		queryData.startTimeBegin = startTimeBegin;
		queryData.startTimeEnd = startTimeEnd;
		this.setState({ queryData });
	}

	componentDidMount() {
		this.getInfo();
		this.getList();
	}

	getInfo = async () => {
		this.setState({ loading: true }, async () => {
			const res = await getKnowledgeInfo();
			this.setState({ info: res, loading: false });
		})
	}

	getList = async () => {
		const { queryData } = this.state;
		let res = await getWorkloadReport({ ...queryData });
		// console.log(res);
		let list = [...res];
		this.setState({ list });
	}

	onSubmit = () => {
		const { queryData } = this.state;
		const infoData = this.props.form.getFieldsValue();
		queryData.query = infoData.query;
		queryData.startTimeBegin = infoData.time[0].format('YYYY-MM-DD');
		queryData.startTimeEnd = infoData.time[1].format('YYYY-MM-DD');
		this.setState({ queryData }, () => this.getList());
	}

	onExport = async () => {
		const { queryData } = this.state;
		let res = await exportWorkloadReport({ ...queryData });
		// console.log('=========>>>', res);
		if (res.code === 0) {
			message.success(formatMessage({ id: 'HomeList.knowledgeCenter.exportSuccess' }));
		}
	}

	quickDate = (startTimeBegin, startTimeEnd) => {
		const { queryData } = this.state;
		queryData.startTimeBegin = startTimeBegin
		queryData.startTimeEnd = startTimeEnd
		this.props.form.setFieldsValue({ time: [moment(startTimeBegin), moment(startTimeEnd)] })
		this.setState({ queryData }, () => this.getList());
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const { info, list, queryData, loading } = this.state;
		const returnCountDom = (delCount, addCount) => {
			if (!(addCount) > 0 && delCount > 0) {
				return (
					<span>
						<span>
							<Icon type="close-circle" style={{ color: 'red', marginRight: 5 }} />
							<span>{delCount}</span>
						</span>
					</span>
				);
			} else if (addCount > 0 && !(delCount > 0)) {
				return (
					<span>
						<span>
							<Icon type="plus-circle" style={{ color: '#3e5bff', marginRight: 5 }} />
							<span>{addCount}</span>
						</span>
					</span>
				);
			} else if (addCount > 0 && delCount > 0) {
				return (
					<span>
						<span style={{ marginRight: 15 }}>
							<Icon type="plus-circle" style={{ color: '#3e5bff', marginRight: 5 }} />
							<span>{addCount}</span>
						</span>
						<span>
							<Icon type="close-circle" style={{ color: 'red', marginRight: 5 }} />
							<span>{delCount}</span>
						</span>
					</span>
				);
			} else {
				return <span style={{ fontWeight: 'unset', fontSize: '18px' }}>-</span>;
			}
		}
		/* const columns1 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.knowledgeBase' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delRootCategoryCount, row.addRootCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.customAPI' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delApiCount, row.addApiCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.entity' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delModelCount, row.addModelCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.slot' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSlotCount, row.addSlotCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.keyword' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delKeywordCount, row.addKeywordCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.businessWord' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delDictCount, row.addDictCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.synonym' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSynWordCount, row.addSynWordCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.userTag' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delUserTagCount, row.addUserTagCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.knowledgeTag' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delTagCount, row.addTagCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.answer' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delAnswerCount, row.addAnswerCount)
				}
			}
		]; */
		const columns2 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 180,
				align: 'center',
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.knowledgePoint' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delQaCount, row.addQaCount)
				}
			},
			{
				      title: formatMessage({ id: 'HomeList.knowledgeCenter.table.category' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delQaCategoryCount, row.addQaCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.qaSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSimilarQaCount, row.addSimilarQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.relatedQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delRelateQaCount, row.addRelateQaCount)
				}
			}
		];
		/* const columns3 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.map' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delAtlasCount, row.addAtlasCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.atlasCategory' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delAtlasCategoryCount, row.addAtlasCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.atlasSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSimilarAtlasNodesCount, row.addSimilarAtlasNodesCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.node' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delAtlasNodesCount, row.addAtlasNodesCount)
				}
			}
		]; */
		/* const columns4 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.dialogCount' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delDialogCount, row.addDialogCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.dialogCategory' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delDialogCategoryCount, row.addDialogCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.dialogSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSimilarDialogCount, row.addSimilarDialogCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.node' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSimilarDialogNodesCount, row.addSimilarDialogNodesCount)
				}
			}
		]; */
		const columns5 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 180,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.document' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delDocCount, row.addDocCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.docCategory' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delDocCategoryCount, row.addDocCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.selfBuiltDoc' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.diyDocCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.uploadDoc' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.uploadDocCount)
				}
			}
		];
		/* const columns6 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.form' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delFormCount, row.addFormCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.category' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delFormCategoryCount, row.addFormCategoryCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.formSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delSimilarFormCount, row.addSimilarFormCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.node' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(row.delFormNodesCount, row.addFormNodesCount)
				}
			}
		]; */
		/* const columns7 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.addSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.relateWaitQueQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.createKnowledgePoint' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.addWaitQueQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.ignoreQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.ignoreWaitQueQaCount)
				}
			}
		]; */
		/* const columns8 = [
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.column.name' }),
				dataIndex: "nick",
				key: "nick",
				width: 120,
				align: 'center',
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.addSimilarQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.relationLibQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.createKnowledgePoint' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.addLibQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.ignoreQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.ignoreLibQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.deleteQuestion' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.delLibQaCount)
				}
			},
			{
				title: formatMessage({ id: 'HomeList.knowledgeCenter.table.addBlacklist' }),
				align: 'center',
				render: (_, row) => {
					return returnCountDom(0, row.moveToBlacklistCount)
				}
			}
		]; */

		return (
			<GridContent>
				<Suspense>
					<PageHeaderWrapper>
						<Card bordered bodyStyle={{ padding: '0 15px' }}>
							<Tabs defaultActiveKey="1">
								<Tabs.TabPane
									tab={
										<div className={styles.lineTitle} style={{ height: '42px' }}>
											<img src="../../../knowledgeImage/library.png" />
											<span>{formatMessage({ id: 'HomeList.knowledgeCenter.knowledgeOverview' })}</span>
										</div>
									}
									key="1"
								>
									<div style={{ marginTop: 4 }}>
										<QaInfo info={info} loading={loading} />
									</div>
								</Tabs.TabPane>
								<Tabs.TabPane
									tab={
										<div className={styles.lineTitle} style={{ height: '42px' }}>
											<img src="../../../knowledgeImage/workload.png" />
											<span>{formatMessage({ id: 'HomeList.knowledgeCenter.workloadReport' })}</span>
										</div>
									}
									key="2"
								>
									<div style={{ marginTop: 4 }}>
										<div className={styles.lineOpt} style={{ marginBottom: 16 }}>
											<Form layout="inline" className={styles.formBox}>
												<Form.Item>
													<div className={styles.dateBtnBox}>
														<div className={queryData.startTimeBegin == yesterday && queryData.startTimeEnd == today ? styles.checkDate : ''} onClick={() => this.quickDate(yesterday, today)}>{formatMessage({ id: 'HomeList.knowledgeCenter.yesterday' })}</div>
														<div className={queryData.startTimeBegin == sevenDaysAgo && queryData.startTimeEnd == today ? styles.checkDate : ''} onClick={() => this.quickDate(sevenDaysAgo, today)}>{formatMessage({ id: 'HomeList.knowledgeCenter.last7Days' })}</div>
														<div className={queryData.startTimeBegin == monthAgo && queryData.startTimeEnd == today ? styles.checkDate : ''} onClick={() => this.quickDate(monthAgo, today)}>{formatMessage({ id: 'HomeList.knowledgeCenter.last30Days' })}</div>
													</div>
												</Form.Item>
												<Form.Item>
													{getFieldDecorator("time", {
														initialValue: [moment().subtract("1", "months"), moment()],
													})(
														<DatePicker.RangePicker allowClear={false} style={{ width: '240px' }} />
													)}
												</Form.Item>
												<Form.Item>
													{getFieldDecorator("query")(
														<Input placeholder={formatMessage({ id: 'HomeList.knowledgeCenter.searchPlaceholder' })} style={{ width: '240px' }} />
													)}
												</Form.Item>
												<Form.Item>
													<Button type="primary" onClick={this.onSubmit}>
														{formatMessage({ id: 'HomeList.knowledgeCenter.search' })}
													</Button>
												</Form.Item>
											</Form>
											<Button onClick={this.onExport}>
												{formatMessage({ id: 'HomeList.knowledgeCenter.exportReport' })}
											</Button>
										</div>

										<Row gutter={[16, 16]}>
											<Col span={24}>
												<div className={styles.tableBox} style={{ marginBottom: 4 }}>
													<p className={styles.text1}>{formatMessage({ id: 'HomeList.knowledgeCenter.table.docQA' })}</p>
													<p className={styles.text2}>{formatMessage({ id: 'HomeList.knowledgeCenter.table.docQADesc' })}</p>
													<Table
														columns={columns5} dataSource={list} bordered size='middle'
														rowKey={(_, index) => index}
														pagination={{
															showQuickJumper: true,
															showSizeChanger: true
														}}
													/>
												</div>
											</Col>
										</Row>
										<Row gutter={[16, 16]}>
											<Col span={24}>
												<div className={styles.tableBox} style={{ marginBottom: 4 }}>
													<p className={styles.text1}>{formatMessage({ id: 'HomeList.knowledgeCenter.table.qaStats' })}</p>
													<p className={styles.text2}>{formatMessage({ id: 'HomeList.knowledgeCenter.table.qaDesc' })}</p>
													<Table
														columns={columns2} dataSource={list} bordered size='middle'
														rowKey={(_, index) => index}
														pagination={{
															showQuickJumper: true,
															showSizeChanger: true
														}}
													/>
												</div>
											</Col>
										</Row>
									</div>
								</Tabs.TabPane>
							</Tabs>
						</Card>
					</PageHeaderWrapper>
				</Suspense>
			</GridContent>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(KnowledgeCenter));
